<template>
  <div class="animate__animated animate__fadeInUp animate__delay-0.5s">
    <div class="login-parsel">
      <p style="font-size: 1.5rem;margin-top:1rem;">创建您的帐户</p>
      <p style="font-size: 0.9rem; color: gray; line-height: 0.1rem;margin-top:1rem;">
        文字描述信息示例
      </p>
      <div style="margin-top: 3rem">
        <el-form :rules="rules" :model="form" ref="formRef">
          <el-form-item prop="email">
            昵称<br />
            <input type="text" class="nameinp" v-model="form.name" />
          </el-form-item>
          <el-form-item prop="phone" >
            电话号码
            <p style="position: relative;">
              <input type="text" class="phoneinp1" placeholder="+86" /><input
                type="text"
                class="phoneinp2"
                placeholder="输入电话号码"
                v-model="form.phone"
              />
              <img src="/china.png" alt="" class="chinaimg" />
            </p>
          </el-form-item>
          <el-form-item prop="email">
            电子邮件<br />
            <input type="text" class="nameinp" v-model="form.email" placeholder="输入您的电子邮箱"/>
          </el-form-item>
          <el-form-item prop="pwd">
            密码<br />
            <el-input
              v-model="form.pwd"
               style="width: 21.8rem; height: 2.7rem; margin-top: 0.5rem;border:1px solid #d0d0d0;border-radius: 0.3rem;"
              type="password"
              placeholder="输入您的密码"
              show-password
            />
          </el-form-item>
        </el-form>
        <p>
          <button class="registerbtn" @click="createuser">
            注册
          </button>
        </p>
        <p
          style="
            font-size: 0.9rem;
            color: gray;
            line-height: 0.1rem;
            text-align: center;
            margin-top: 3rem;
          "
        >
          注册即表示您同意
        </p>
        <p
          style="
            font-size: 0.9rem;
            color: gray;
            line-height: 0.1rem;
            text-align: center;
            margin-top: 1.2rem;
          "
        >
          条款和条件以及隐私政
        </p>
        <p style="text-align: center; margin-top: 3.5rem; font-size: 0.9rem">
          <span style="color: gray" @click="router.push('/way')"
            >已经有账户？</span
          ><span style="color: #ffb900" @click="router.push('/login')"
            >登录</span
          >
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
const router = useRouter();
const form = ref({
  name: "",
  phone: "",
  email: "",
  pwd: "",
});

const rules = reactive({
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: ["blur", "change"],
    },
  ],
  pwd: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度在 6 到 20 个字符", trigger: "blur" },
  ]
  });

const formRef = ref<FormInstance>();

const createuser = async()=>{
  //表单校验
  await formRef.value?.validate().catch((err)=>{
    // console.log(err)
    throw err
  })
  router.push({
    path:'/person',
    query:{
      name:form.value.name,
      phone:form.value.phone,
      email:form.value.email,
      pwd:form.value.pwd
    }
  })
}
</script>

<style lang="scss" scoped>
.login-parsel {
  width: 90vw;
  height: auto;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
}
.nameinp {
  width: 85vw;
  padding: 0.3rem;
  box-sizing: border-box;
  margin-top: 0.1rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.3rem;
}
.phoneinp1 {
  width: 23vw;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
  border-radius: 0.3rem 0rem 0rem 0.3rem;
  border-right: none;
  text-align: right;
}
.phoneinp2 {
  width: 61vw;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
  border-radius: 0.3rem;
  border-left: none;
}

.registerbtn {
  width: 85vw;
  height: 3rem;
  margin: 0 auto;
  margin-top: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #ffb900;
  color: white;
  font-size: 1.2rem;
}

::v-deep .el-input__wrapper {
  box-shadow: none;
}
input:focus {
  background: rgba(255, 185, 0, 0.1);
  border: 1px solid rgb(255, 185, 0);
}

.chinaimg {
  width: 2rem;
  height: 1.5rem;
  position: absolute;
  left: 0.5rem;
  top: 0.9rem;
}
</style>